html, body, #wrapper, #page, #page > .row, #sidebar, #entry, .list, .song-detail, .lyric
  height 100%
  min-height 100%

img
  background #fff

a
  outline none
  color #767676
  text-decoration none

.loading
  -webkit-animation loading 1500ms infinite linear

.navbar
  box-shadow 0 0 8px rgba(0, 0, 0, 0.21)
  #user-profile
    line-height 50px
    padding-top 0
    padding-bottom 0
    img
      height 30px
      width 30px
      margin-right 10px
    p
      margin 0
      display inline-block
  #menugo-0 span
  #menugo-1 span
    margin-right 10px

#page
  padding-top 50px
  padding-bottom 60px

#main
  position relative
  #sidebar
    display block
    position absolute
    top 0
    right 75%
    width 25%
    border-right 1px solid #eee
    padding 0
    overflow hidden
    background-color #f8f8f8
    #entry
      padding 0 9px 30px 10px
      overflow-y auto
      &::-webkit-scrollbar
        width: 2px
      &::-webkit-scrollbar-track
        margin-bottom: 30px
      &::-webkit-scrollbar-track-piece
        background-color #f8f8f8
      &::-webkit-scrollbar-thumb
        background-color #999
        border-radius 4px
        &:hover
          background-color #767676
      .plts-group
        margin-top 20px
        .plts-title
          font-size 13px
          color #A5A3A3
          padding-bottom 5px
          padding-left 15px
        li
          border-radius 3px
          a
            position: relative
            font-size 13px
            line-height 13px
            padding 8px 16px
            border-radius 3px
            .name
              margin-right 62px
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
            .limark
              position absolute
              right 5px
              top 6px
            span
              float right
              margin-left 5px
              margin-right 5px
            span.badge
              padding 2px 7px
              background-color: #767676
              color: #fff
            &:hover, &:focus
              color #767676
          &.active > a, &.active > a:focus, &.active > a:hover
            color #fff
            background-color: #428bca
          &.active > a span.badge
            background-color #fff
            color #428bca

    #plts-tools
      position absolute
      bottom 0
      width 100%
      z-index 1000
      padding-left 15px
      padding-right 16px
      color #767676
      text-align right
      line-height 30px
      background-color #eee
      span
        margin-left 5px
        margin-right 5px

  .list
    overflow auto
    width 100%
    padding-left 25%
    .twrap
      padding 0 15px
    table
      a
        outline none
        text-decoration none
        &:hover, &:focus
          color #d9534f
      td > a
        margin-left 10px
      thead, td:last-child
        white-space nowrap
      .dropdown-menu
        right 0
        left inherit
        a:hover, a:focus
          color #333

.song-detail
  position absolute
  z-index 1000
  padding 80px 15px
  left 0
  bottom 0
  overflow auto
  width 100%
  background-color #f4f4f4
  transition transform 0.2s
  transform scale(0, 0)
  transform-origin 20% 100%
  .detail
    position absolute
    z-index 1
    padding 0 10px
    width 260px
    margin-left 32px
    .cover
      position relative
      &:after
      &:before
        content ""
        position absolute
        z-index -1
        bottom 15px
        left 10px
        width 50%
        height 20%
        box-shadow 0 15px 10px rgba(125, 125, 125, 0.8)
        transform rotate(-3deg)
      &:after
        right 10px
        left auto
        transform rotate(3deg)
      img
        width 240px
        height 240px
    ul.info
      margin-top 20px
      padding-left 0
      li
        list-style none
        line-height 25px
        span.glyphicon
          margin-right 10px

  .lyric
    position relative
    min-height 350px
    overflow hidden
    &, &:before, &:after
      width 100%
      padding-left 360px
      padding-right 100px
    &:before, &:after
      content ""
      position absolute
      top 0
      left 0
      z-index 1
      height 40px
      background linear-gradient(to bottom, #f4f4f4, transparent) content-box
    &:after
      bottom 0
      top auto
      background linear-gradient(to top, #f4f4f4, transparent) content-box
    ul
      position relative
      line-height 20px
      font-size 15px
      text-align center
      padding-left 0
      transition all 1s ease-in-out
      &::-webkit-scrollbar
        display none
      li
        list-style none
        min-height 20px
        color #808080
        margin 8px auto
        transition all 0.5s ease-in-out
        &.current
          color #000
          font-size 18px

  .lrc-tools
    position absolute
    right 70px
    top 100px
    border-radius 4px
    box-shadow rgba(159, 159, 159, 0.5) 0 0 12px
    .btn
      background-color #fff
      &:active
      &:hover
        box-shadow inset 0 0 5px rgba(0, 0, 0, .125)

#settings
  overflow auto
  .panel
    margin 50px auto
    width 80%

#footer
  position fixed
  bottom 0
  z-index 1500
  width 100%
  background-color #262626
  .mini-tool
    display none
  a
    color #fff
    outline none
    text-decoration none
    margin-left 5px
    margin-right 5px
    &:hover
      color #bdbdbd
  .audio-control, .audio-adjust
    line-height 60px
    font-size 25px
    color #fff
    text-align center
    min-width 138px
  .audio-adjust a
    margin-right 5px
    &#vol-wrapper
      position relative
      overflow visible
      &:hover #vol-panel
        display block
    #vol-panel
      bottom 40px
      top: inherit
      left -70px
      width 150px
      .layer
        position absolute
        bottom -11px
        width 100%
        height 11px
      .slider
        width 100%
      .slider-track
        border-radius 4px
        background-color #e7e7e7
      .slider-selection
        display none
      .slider-handle
        height 12px
        width 12px
        margin-left -5px
        margin-top -1px
        border-radius 50%
        background #5e5e5e
  .audio-body
    color #fff
    .media-left
    .media-body
      display block
      height 60px
    .media
      overflow visible
    .media-heading
      margin-top 12px
      margin-bottom 5px
      white-space nowrap
      display inline-block
      overflow hidden
      text-overflow ellipsis
      width 100%
      padding-right 85px
    .media-left
      position absolute
      top 6px
      z-index 2
      a
        display block
        width 50px
        cursor pointer
      img
        width 50px
        height 50px
        border-width 0
        padding 0
        vertical-align middle
        &:hover
          -webkit-filter brightness(0.5)
    .media-body
      width 100%
      padding-left 65px
      position relative
      overflow visible
    .media-time
      display block
      position absolute
      right 0
      top 10px
    #progress
      width 100%
      margin-top -10px
      .slider-track
        background none repeat scroll 0 0 #E8E8E8
        border-radius 15px
        width 100%
      .slider-selection
        background none repeat scroll 0 0 #0099CC
        border-top-right-radius 0
        border-bottom-right-radius 0
      .slider-handle
        margin-left -7px
        margin-top -2px
        height 14px
        width 14px
        background none repeat scroll 0 0 #fff
        box-shadow 0 0 10px #333

@keyframes loading {
  from {
    transform rotate(0deg)
  }
  to {
    transform rotate(360deg)
  }
}

@media (max-width: 768px)
  .list
    padding-left 0 !important

  #open-side, #sidebar
    display none

@media (max-width 560px)
  #page
    display none

  #footer
    .mini-tool
      display block
      float left
      color #fff
      margin-left 20px
      line-height 60px
      font-size 16px
    .audio-control
      float left
    .media
      float left
      padding-left 15px
      width 350px
    .audio-adjust
      display none
